<template>
	<view class="main">
		<view class="card">
			<view class="topCard">
				<view class="item">
					<text>{{list[0].patients_name}}</text>
					<text class="tag">{{list[0].relationship}}</text>
				</view>
				<view class="btn" @click="open('bottom')">
					<image src="/static/images/切换.png"></image>
				</view>
			</view>
			<view class="bottomCard">
				<text class="idCard">{{list[0].patients_id_number}}</text>
				<text class="personItem2">切换就诊人</text>
			</view>
		</view>
		<view class="tab">
			<button v-for="item in btnactive" :class="{active:item.type}" @click="btnGaib(item)">{{item.typeName}}</button>
		</view>
		<view class="desc">
			<taoCan :arr="arr2" :patientsData='list'></taoCan>
		</view>
		<view>
			<uni-popup ref="popup" type="bottom" background-color="#fff">
				<view class="tanTitle">选择就诊人</view>
				<view class="tanSection">
					<view class="tanCard" v-for="item in listS" @click="change(item.patients_id)">
						<view>
							<view>
								<text>{{item.patients_name}}</text>
								<text class="tag">{{item.relationship}}</text>
							</view>
							<view class="idCard idCard2">{{item.patients_id_number}}</view>
						</view>
						<view class="idCard3"> &gt; </view>
					</view>
	
				</view>
				
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import taoCan from '@/components/taoCan/taoCan.vue'
	import {onLoad} from '@dcloudio/uni-app'
	import {
		ref,
		toRefs,
		reactive,
		getCurrentInstance
	} from 'vue'
	export default {
		components: {
			taoCan
		},
		setup() {
			const data = reactive({
				btnactive: [{
					    typeId:1,
						typeName: '男性套餐',
						type: true
					},
					{
						typeId:2,
						typeName: '女性套餐',
						type: false
					},
					{
						typeId:3,
						typeName: '老年人套餐',
						type: false
					},
					{
						typeId:4,
						typeName: '入职套餐',
						type: false
					}
				],
				type2:'center',
				list:[],
				listR:[],
				listS:[],
				listS2:[],
				ida:1,
				arr2:[]
			})
			const btnGaib=(obj)=>{
				// console.log(obj);
				data.ida=obj.typeId
				getMedical();
				data.btnactive.forEach(item=>{
					if(item.typeName==obj.typeName){
						item.type=true
					}else {
						item.type=false
					}
				})
			}
			const getMedical=()=>{
				uni.request({
				    url: 'http://localhost:3000/getMedicalName', 
					data:{id:data.ida},
				    success: (res) => {
						console.log(res,999);
				        data.arr2 = res.data.data;
						console.log(data.arr2);
					}
				});
			}
			getMedical();
			// 获取当前组件实例
			const vm = getCurrentInstance();
			// console.log(vm.ctx.$refs,'啦啦啦啦');
			
			const open=(type2)=>{
				data.type2=type2;
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				vm.ctx.$refs.popup.open(type2);
			}
			
			
			onLoad((option)=>{
				// console.log(option);
				const list2= uni.getStorageSync('list');
				list2.forEach((item)=>{
					if(option.id==item.patients_id){
						data.list.push(item)
					}else{
						data.listS.push(item)
					}
				})
				// console.log(list2,333)
				console.log(data.list,111);
				console.log(data.listS,222);
				data.listR=data.list;
				uni.setStorageSync('listBR',data.list);
				uni.setStorageSync('listChange',data.listS)
			})
			
			const change=(value)=>{
				data.listS.forEach((item)=>{
					if(value==item.patients_id){
						data.listS2[0]=item
					}
				})
				data.list=data.listS2;
				console.log(data.list,555);
				console.log(data.listS,666);
				let index=0;
				data.listS.forEach((itemD)=>{
					index++;
					if(itemD.patients_id==data.list[0].patients_id){
						index--;
						data.listS.splice(index,1);
						data.listS.push(data.listR[0]);
						data.listR[0]=data.list[0];
					}
				})

				console.log(data.listS,28);
				vm.ctx.$refs.popup.close();
			}
			
			return {
				...toRefs(data),btnGaib,open,change
			}
		}
	}
</script>

<style>
	.main{
		padding: 30rpx;
		box-sizing: border-box;
		/* border: 1rpx solid mediumvioletred; */
	}
	.card{
		display: flex;
		flex-direction: column;
		justify-content: center;
		border: 1rpx solid royalblue;
		height: 200rpx;
		background-color: #F5F9FF;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
	.topCard{
		display: flex;
		justify-content: space-between;
	}
	.tag{
			border-radius: 20rpx;
			background-color: #E2EDFE;
			padding: 2rpx 15rpx;
			box-sizing: border-box;
			font-size: 25rpx;
			color: #2E88FF;
			margin-left: 20rpx;
		}
	.btn{
		margin-right: 40rpx;
		padding:5rpx 10rpx ;
		background-color: gainsboro;
		border-radius: 50%;
	}
	.btn image{
		width: 25rpx;
		height: 25rpx;
	}
	.bottomCard{
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.idCard{
		color: #939598;
		font-size: 25rpx;
	}
	.personItem2{
		color: #939598;
		font-size: 25rpx;
	}

	.tab {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		padding: 30rpx 0;
		box-sizing: border-box;
		width: 100%;
	}

	.tab button:hover {

		color: white;
	}

	.tab button {
		width: 25%;
		font-size: 23rpx;
		background-color: white;
	}

	.tab button.active {
		background-color: #2E88FF !important;
		color: #fff;
	}
	.tanSection{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.tanTitle{
		padding: 30rpx;
		box-sizing: border-box;
		text-align: center;
	}
	.tanCard{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
		padding: 30rpx;
		box-sizing: border-box;
	}
	.idCard2{
		padding-top: 30rpx;
		box-sizing: border-box;
	}
	.idCard3{
		color: #939598;
		font-size: 30rpx;
	}
</style>
